import React,{Component} from 'react';
import {Route, Switch} from "react-router";
import Sidebar from '../components/Sidebar/Sidebar.jsx'
import withStyles from "@material-ui/core/styles/withStyles";
import routes from "../routes/routes.js";
import dashboardStyle from "../assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx";
import image from "../assets/img/sidebar-2.jpg";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import IconButton from "@material-ui/core/IconButton";
import {AccountCircle} from "@material-ui/icons";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import ListItemText from "@material-ui/core/ListItemText";

const StyledMenu = withStyles({
    paper: {
        border: '1px solid #d3d4d5',
    },
})(props => (
    <Menu
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
        }}
        transformOrigin={{
            vertical: 'top',
            horizontal: 'center',
        }}
        {...props}
    />
));

const StyledMenuItem = withStyles(theme => ({
    root: {
        '&:focus': {
            backgroundColor: theme.palette.primary.main,
            '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
                color: theme.palette.common.white,
            },
        },
    },
}))(MenuItem);
class Main extends Component{
    constructor(props) {
        super(props);
        this.state = {
            color: "blue",
            hasImage: true,
            fixedClasses: "dropdown show",
            mobileOpen: false,
            auth:true,
            anchorEl:null,
        };
    }

    handleChange=(event)=> {
        this.setState({
            auth:event.target.checked
        })
    }
    handleClose =()=> {
        this.setState({
            anchorEl:null
        })
    }
   handleMenu=(event)=> {
        this.setState({
            anchorEl:event.currentTarget
        })
    }

    logout = () =>{
        this.props.history.push('/');
    }

    gotoProfile=()=>{
        this.props.history.push("/main/userProfile")
    }

    switchRoutes = ()=> {
        const list=[];
        routes.map((prop, key) => {
            if(prop.children==null){
                const companent = {};
                companent.path = prop.layout + prop.path;
                companent.key = key;
                companent.component =prop.component;
                list.push(companent);
            }else{
                prop.children.map((item,key)=>{
                    const companent = {};
                    key = key + "_child";
                    companent.path = item.layout + item.path;
                    companent.key = key;
                    companent.component = item.component;
                    list.push(companent);
                })
            }
        })
        return list;
    }
   makeBrand =() =>{
        var name;
        routes.map((prop, key) => {
            if(prop.children==null){
                if (prop.layout + prop.path ===this.props.location.pathname) {
                    name = prop.name;
                }
            }else {
                prop.children.map((item,key)=>{
                    if (item.layout + item.path ===this.props.location.pathname) {
                        name = prop.name+"/"+item.name;
                    }
                })
            }

            return null;
        });
        return name;
    }
    render(){
        const { classes,color, ...rest } = this.props;
        const appBarClasses = classNames({
            [" " + classes[color]]: color
        });
        return(
            <div className={classes.wrapper}>
                <Sidebar
                    routes={routes}
                    color='blue'
                    image={image}
                    open={false}
                    {...rest}
                />
                <div className={classes.mainPanel} ref="mainPanel">
                    <AppBar position="static" className={classes.appBar}>
                        <Toolbar>
                            <Typography className={classes.title}>
                                当前位置：{this.makeBrand()}
                            </Typography>
                            {
                                <div>
                                    <IconButton
                                        aria-label="Account of current user"
                                        aria-controls="menu-appbar"
                                        aria-haspopup="true"
                                        color="inherit"
                                        onClick={this.handleMenu.bind(this)}
                                    >
                                        <AccountCircle/>
                                    </IconButton>
                                    <StyledMenu
                                        id="customized-menu"
                                        anchorEl={this.state.anchorEl}
                                        keepMounted
                                        open={Boolean(this.state.anchorEl)}
                                        onClose={this.handleClose.bind(this)}
                                    >
                                        <StyledMenuItem>
                                            <ListItemText onClick={this.gotoProfile.bind(this)} primary="个人信息" />
                                        </StyledMenuItem>
                                        <StyledMenuItem>
                                            <ListItemText onClick={this.logout.bind(this)} primary="退出" />
                                        </StyledMenuItem>
                                    </StyledMenu>
                                </div>
                            }
                        </Toolbar>
                    </AppBar>
                <div className={classes.content}>
                    <div className={classes.container}><Switch>
                        {
                            this.switchRoutes().map((item)=>{
                                return  <Route
                                    path={item.path}
                                    component={item.component}
                                    key={item.key}
                                />
                            })
                        }
                    </Switch></div>
                </div>
                </div>
            </div>
        );
    }
}
export default withStyles(dashboardStyle)(Main);